<template>
	<view class="coll-list">
		<view class="tabs-wrap">
			<rf-tabs ref="tabs" :values="items" @clickItem="clickItem"></rf-tabs>
		</view>
		<view class="tabs-content" :style="{height: listHeight + 'px'}">
			<swiper :indicator-dots="false" :autoplay="false" @change="contentChange" :current="currentIndex" style="height: 100%;">
				<swiper-item>
					<view class="swiper-item">
						<checkbox-group @change="checkboxChange">
							<template  v-for="(v, i) in list1">
								<view class="coll-item" :key="i">
									<checkbox v-if="empid === createBy" :value="v.owner" :checked="checkList.includes(String(v.owner))">{{v.ownerName}}</checkbox>
									<label v-else>{{v.ownerName}}</label>
									<text>未响应{{v.collFlag==1?'(未读)':'(已读)'}}</text>
								</view>
							</template>
							<view class="coll-no-data" v-if="list1.length == 0">
								暂无数据
							</view>
						</checkbox-group>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="coll-item" v-for="(v, i) in list2" :key="i">
							{{v.ownerName}}<text>接受</text>
						</view>
						<view class="coll-no-data" v-if="list2.length == 0">
							暂无数据
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="coll-item" v-for="(v, i) in list3" :key="i">
							{{v.ownerName}}<text>已完成{{v.collFlag==4?'(拒绝)':''}}</text>
						</view>
						<view class="coll-no-data" v-if="list3.length == 0">
							暂无数据
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="tip-btn" v-if="empid === createBy && list1.length > 0 && currentIndex == 0" @click="tipClick">
			一键提醒
		</view>
	</view>
</template>

<script>
	import rfTabs from '@/components/rf-tabs/rf-tabs.vue'	 
	export default {
		components: { rfTabs },
		data() {
			return {
				items: ['未响应', '已接受', '已完成'],
				currentIndex: 0,
				pkid: '',
				list1: [],
				list2: [],
				list3: [],
				listHeight: 0,
				createBy: '',
				empid: '',
				checkList: []
			};
		},
		onLoad(option) {
			if (option.pkid) {
				// let _userInfo = uni.getStorageSync(config.Global.cache + '_Token');
				let _userInfo = this.$store.state.vuex_user.userInfo //uni.getStorageSync(config.Global.cache + '_UserProvider');
				// this.empid = _userInfo.random_member_no
				this.empid = _userInfo.employNo
				this.pkid = option.pkid
				this.loadData()
			}
		},
		methods: {
			loadData() {
				let pkid ={pkid:this.pkid}
				console.log(pkid)
				this.$u.api.scheduleDetail(pkid).then(res => {
					this.list1 = []
					this.list2 = []
					this.list3 = []
					let _flag = this.checkList.length
					this.createBy = res.createBy
					if (res.schCollaborators) {
						res.schCollaborators.forEach(item => {
							if (item.status === 0) {
								if (item.collFlag === 3) {
									this.list2.push(item)
								} else {
									this.list1.push(item)
									if(_flag==0){
										this.checkList.push(item.owner)
										
									}
								}
							} else {
								this.list3.push(item)
							}
						})
						this.changeHeight()
					}
				}).catch(err => {
					console.error(err)
				})
				
				
				// detailSchedule(this.pkid).then(res => {
				// 	this.list1 = []
				// 	this.list2 = []
				// 	this.list3 = []
				// 	let _flag = this.checkList.length
				// 	this.createBy = res.createBy
				// 	if (res.schCollaborators) {
				// 		res.schCollaborators.forEach(item => {
				// 			if (item.status === 0) {
				// 				if (item.collFlag === 3) {
				// 					this.list2.push(item)
				// 				} else {
				// 					this.list1.push(item)
				// 					if(_flag==0){
				// 						this.checkList.push(item.owner)
										
				// 					}
				// 				}
				// 			} else {
				// 				this.list3.push(item)
				// 			}
				// 		})
				// 		this.changeHeight()
				// 	}
				// })
			},
			contentChange(e) {
				this.$refs.tabs.selTab(e.detail.current)
				this.loadData()
			},
			clickItem(e) {
				this.currentIndex = e
				this.loadData()
			},
			changeHeight() {
				let _key = 'list' + (this.currentIndex + 1)
				this.listHeight = this[_key].length * 50 + 50
			},
			tipClick() {
				// console.log(this.checkList.length)
				if(this.checkList.length==0){
					this.$u.toast('请选择提醒人员');
					return false
				}else{
					let _data = {
						pkid:this.pkid,
						schCollEmployNos:this.checkList
					}
					helper.ajax({
						url: '/api/schedule/mobile/schedule/noticeNotRespCollByMsg',
						method:'post',
						contentType: "application/json",
						data:_data,
						loadingShow: true,
						success: res => {
							this.$u.toast('提醒已发出');
						}
					});
					// noticeNotRespCollByMsg(_data).then(res => {
					// 	rfToast('提醒已发出')
					// })
				}
				
			},
			checkboxChange(e) {
				this.checkList = e.detail.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coll-list {
		padding-top: 53px;
		.tabs-wrap {
			position: fixed;
			top: 0;
			width: 100%;
			height: 50px;
			z-index: 999;
		}
		.tabs-content {
			position: relative;
			min-height: calc(100vh - 53px);
			.swiper-item {
				height: 100%;
				.coll-item {
					box-sizing: border-box;
					padding: 16px;
					height: 50px;
					border-bottom: 1px solid #eee;
					background-color: #FFFFFF;
					text {
						color: #999;
						float: right;
					}
				}
			}
		}
		.coll-no-data {
			padding: 50px 0;
			text-align: center;
			color: #999;
		}
	}
	.tip-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		height: 50px;
		line-height: 50px;
		color: #0091EA;
		background-color: #f5f5f5;
	}
</style>
